<script setup lang="ts">
import { ref, onMounted } from 'vue'
import G6 from '@antv/g6'
import Mock from '@/views/mock/day2'
const mountNode = ref()

const init = () => {
  // 定义数据、实例化图、加载数据、渲染图
  const graph = new G6.Graph({
    container: mountNode.value,
    width: document.documentElement.clientWidth * 0.6,
    height: document.documentElement.clientHeight * 0.7,
    animate: true, // 启用动画
    defaultNode: {
      size: 30
    },
    layout: {
      type: 'concentric',
      preventOverlap: true, // 防止重叠
      nodeSize: 10, // 节点大小（直径）
      nodeSpacing: 20, // 环与环之间最小间距
      sortBy: 'label'
    },
    defaultEdge: {
      style: {
        lineWidth: 1,
        endArrow: {
          path: G6.Arrow.vee(5, 7, 0)
        }
      }
    }
  })
  // @ts-ignore
  graph.data(Mock) //  加载数据
  graph.render() // 渲染图
}

onMounted(() => {
  init()
})
</script>
<template>
  <div ref="mountNode" class="container" />
</template>

<style lang="scss" scoped>
.container {
  border: 4px solid #5b8ff9;
}
</style>
